<!DOCTYPE html>
<html>
<head>
    <title>忘记密码</title>
    {% include 'system/common/header.html' %}
    <style>
        .forget-page {
            min-height: 100vh;
            background-image: url('/static/images/bj.png');
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .forget-form {
            background: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }
        .forget-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
            color: #333;
        }
        .layui-form-item {
            margin-bottom: 20px;
        }
        .layui-input {
            height: 40px;
            line-height: 40px;
        }
        .layui-btn {
            width: 100%;
            height: 40px;
            line-height: 40px;
        }
        .code-btn {
            position: absolute;
            right: 0;
            top: 0;
            height: 40px;
            line-height: 40px;
            padding: 0 15px;
            background: #1E9FFF;
            color: #fff;
            border: none;
            border-radius: 0 2px 2px 0;
            cursor: pointer;
        }
        .code-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .code-input {
            position: relative;
        }
    </style>
</head>
<body>
<div class="forget-page">
    <div class="forget-form">
        <h2 class="forget-title">忘记密码</h2>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 0;">
                    <input type="text" name="email" lay-verify="required|email" placeholder="请输入注册邮箱"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block code-input" style="margin-left: 0;">
                    <input type="text" name="emailCode" lay-verify="required" placeholder="请输入验证码"
                           autocomplete="off" class="layui-input">
                    <button type="button" class="code-btn" id="sendEmailCode">获取验证码</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 0;">
                    <input type="password" name="newPassword" lay-verify="required|pass" placeholder="请输入新密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 0;">
                    <input type="password" name="confirmPassword" lay-verify="required|confirmPass" placeholder="请确认新密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 0;">
                    <button class="layui-btn" lay-submit lay-filter="forget">重置密码</button>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <a href="{{ url_for('system.passport.login') }}" style="color: #1E9FFF;">返回登录</a>
            </div>
        </form>
    </div>
</div>
{% include 'system/common/footer.html' %}
<script>
    layui.use(['form', 'button', 'popup', 'layer'], function () {
        var form = layui.form;
        var button = layui.button;
        var popup = layui.popup;
        let layer = layui.layer;
        let $ = layui.jquery;

        // 自定义验证规则
        form.verify({
            pass: [
                /^[\S]{6,12}$/,
                '密码必须6到12位，且不能出现空格'
            ],
            confirmPass: function(value) {
                var password = $('input[name=newPassword]').val();
                if(value !== password) {
                    return '两次输入的密码不一致';
                }
            }
        });

        // 发送验证码点击事件
        $("#sendEmailCode").click(function() {
            let email = $('input[name=email]').val();
            if(!email) {
                popup.failure('请输入邮箱');
                return;
            }
            
            let btn = $(this);
            // 发送验证码请求
            $.ajax({
                url: "{{ url_for('system.passport.send_reset_code') }}",
                type: "post",
                data: {email: email},
                success: function(res) {
                    if(res.success) {
                        popup.success('验证码已发送');
                        // 倒计时
                        let countdown = 60;
                        btn.attr('disabled', true);
                        let timer = setInterval(function() {
                            if(countdown > 0) {
                                btn.text(countdown + '秒后重试');
                                countdown--;
                            } else {
                                clearInterval(timer);
                                btn.attr('disabled', false);
                                btn.text('获取验证码');
                            }
                        }, 1000);
                    } else {
                        popup.failure(res.msg);
                    }
                }
            });
        });

        // 重置密码提交
        form.on('submit(forget)', function(data) {
            let loader = layer.load();
            let btn = button.load({elem: '.forget'});
            $.ajax({
                url: "{{ url_for('system.passport.reset_password') }}",
                type: "post",
                data: data.field,
                success: function(res) {
                    layer.close(loader);
                    btn.stop(function() {
                        if(res.success) {
                            popup.success(res.msg, function() {
                                location.href = "{{ url_for('system.passport.login') }}";
                            });
                        } else {
                            popup.failure(res.msg);
                        }
                    });
                }
            });
            return false;
        });
    });
</script>
</body>
</html> 